<template>
<div>
    <div class="hySmallContainerRowTwoL">
        <ul class="border-add">
            <li v-for="(item,index) in result" :key="index" @mouseover="change(index)" :class="{bgImgRed:liIndex==index,bgImgBlack:liIndex!=index}" @click="route(index)" v-if="index<9">
              <a href="javascript:;">{{item.name}}</a>
            </li>
        </ul>
	</div>
   <div class="hySmallContainerRowTwoR">
        <div class="hySmallContainerRowTwoRContent">
            <p style="font-size: 24px;color:#FDFDFD;">微信小程序</p>
            <p style="font-size: 16px;color:#FDFDFD;margin-top:40px;">美辰新媒为微信小程序提供从广告投放、定向、数据分析到跟踪管理的全套解决方案，紧跟小程序的发展趋势并结合美辰新媒智能投放系统，精准定位品牌受众与媒体粉丝，将社会化媒介与传统强势媒体相结合，做多元化渠道推广，实现高效传播，发挥数字营销的最大价值。</p>
            <button style="width:140px;height: 36px;background-color: #EE4041;color:#FDFDFD;margin-top:80px;font-size: 14px;" @click="tapToMiniProgram">了解更多</button>
            <!-- 品牌名称 -->
            <img src="../../../assets/img/4-行业解决方案/虚线.png" alt="" style="margin-top:50px;">
            <ul class="pp">
                <li>
                    <img src="../../../assets/img/4-行业解决方案/10.png" alt="">
                </li>
                <li>
                    <img src="../../../assets/img/4-行业解决方案/11.png" alt="">
                </li>
                <li>
                    <img src="../../../assets/img/4-行业解决方案/12.png" alt="">
                </li>
                <li>
                    <img src="../../../assets/img/4-行业解决方案/13.png" alt="">
                </li>
                <li>
                    <img src="../../../assets/img/4-行业解决方案/14.png" alt="">
                </li>
                <li>
                    <img src="../../../assets/img/4-行业解决方案/15.png" alt="">
                </li>
            </ul>
        </div>
	</div>
</div>
</template>
<script>
export default {
  data() {
    return {
      args: {
        page: 1,
        limit: 10,
         homeShowFlag:1
      },
      result: "",
      // 样式属性
      liIndex: 0,
      // 显示属性
      liIndex1: 0
    };
  },
  methods: {
    change(index) {
      this.liIndex = index;
    },
    route(index) {
      // 获取动态路径
      this.$router.push({ path: this.result[index].src,query:{id:this.result[index].id}});
    },
    tapToMiniProgram(){
      this.$router.push({ path: "/smallWechat", query: { id: 1 } });
    }
  },
  mounted() {
    this.$ajax
      .post(this.Ipurl + "industryPlan/selectPage", this.args)
      .then(res => {
        this.result = res.data.dataInfo.records;
      });
  }
};
</script>
<style scoped>
.hySmallContainerRowTwoL {
  float: left;
  width: 187px;
  margin-top: 50px;
}
.hySmallContainerRowTwoL > ul {
  width: 100%;
}
.hySmallContainerRowTwoL ul li {
  width: 100%;
  height: 34px;
  text-align: center;
  line-height: 34px;
  padding: 8px 0;
  box-sizing: content-box;
}
.hySmallContainerRowTwoL ul li a {
  color: #fdfdfd;
  font-size: 18px;
}
.bgImgRed {
  background: url("../../../assets/img/4-行业解决方案/gb001.png");
  border-right: 3px solid #fff;
  
}
.border-add{
  border-right:1px solid #fff;
  padding-right:3px; 
}
.bgImgBlack {
  background: url("../../../assets/img/4-行业解决方案/bg002.png");
  border-right: none;
}
.hySmallContainerRowTwoR {
  float: right;
  width: 930px;
}
.hySmallContainerRowTwoRContent {
  margin-top: 90px;
}
.pp li {
  width: 155px;
  float: left;
  margin-top: 90px;
  text-align: center;
}
.pp li:nth-child(1) > img {
  float: left;
}
.pp li:nth-child(6) > img {
  float: right;
}
</style>


